<template>
  <view style="height: 100vh;overflow:auto;">
    <view class="bg"></view>
    <view class="card">
      <view class="inputs">
        <view class="inputs-item">
          <view class="item-icon">
            <uv-icon name="/static/cargoTrack/circle.svg" />
          </view>
          <view class="item-body">
            <view>船公司</view>
            <view class="body-inputs" @click="openShip">
              <uv-input v-model="params.shipping" readonly placeholder="请选择船公司" border="none" />
              <view class="inputs-icon">
                <uv-icon name="arrow-right" />
              </view>
            </view>
          </view>
        </view>
        <view class="inputs-item">
          <view class="item-icon">
            <uv-icon name="/static/cargoTrack/circle2.svg" />
          </view>
          <view class="item-body">
            <view>提单号</view>
            <view class="body-inputs">
              <uv-input v-model="params.billNo" placeholder="请输入正确的提单号" border="none" />
            </view>
          </view>
        </view>
      </view>
      <view class="btn">
        <uv-button type="primary" @click="onSubscrible" :loading="loading" loadingText="正在订阅...">
          订阅搜索
        </uv-button>
      </view>
      <view class="search">
        <view class="search-title">最近搜索</view>
        <view class="search-body">
          <view class="search-item" v-for="item in historySubscribleList" @click="setParams(item)">
            <view>B/L {{item.billNo}}</view>
            <view>{{item.Code}} {{item.CnShippingName}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="nav">
        <view class="nav-title">我的订阅</view>
        <view class="nav-all" @click="goUserSubscrible">
          <view>查看全部</view>
          <view>
            <uv-icon name="arrow-right" color="#3A75F5" />
          </view>
        </view>
      </view>
      <view class="data">
        <appSubscribleList :subscribleList="subscribleList"></appSubscribleList>
      </view>
    </view>
    <appSelectShip v-model="shipVisible" @change="changeShip" :code="params.shipping"></appSelectShip>
    <subscriblePopup v-model="subscriblePopupVisible" v-model:shipping="params.shipping" v-model:billNo="params.billNo">
    </subscriblePopup>
  </view>
</template>

<script>
	import appSubscribleList from '@/pages/components/app-subscrible-list/app-subscrible-list.vue'
	import appSelectShip from '@/pages/components/app-select-ship/app-select-ship.vue'
	import subscriblePopup from './components/subscrible-popup.vue'
	import {
		getStorage,
		setStorage
	} from '@/utils/storage'
	import request from '@/utils/request'
	import {
		formatDateText
	} from '@/utils/times.js'
import customRouter from '../../../utils/customRouter'
	export default {
		components: {
			appSubscribleList,
			appSelectShip,
			subscriblePopup
		},
		data() {
			return {
				shipVisible: false,
				params: {
					shipping: '',
					billNo: ''
				},
				selectShipRow: {},
				historySubscribleList: [],
				subscriblePopupVisible: false,
				loading: false,
				subscribleList: []
			};
		},
		methods: {
			openShip() {
				this.shipVisible = true
			},
			changeShip(e) {
				this.selectShipRow = {
					Code: e.Code,
					CnShippingName: e.CnShippingName
				}
				this.params.shipping = e.Code
			},
			onSubscrible() {
				if (!(this.params.billNo && this.params.shipping)) return uni.showToast({
					title: "请输入提单号和船公司",
					icon: 'none'
				})
				this.loading = true
				request.post('/api/CargoTrack/GetSubscribeData', this.params).then(res => {
					this.loading = false
					if (!res.Status) return
					this.selectShipRow.billNo = this.params.billNo
					this.openPopup()
					this.setNewSubscribleList()
					this.getNewSubscribleList()
					this.getSubscribleList()
				}).catch(err=>{
					this.loading = false
				})
			},
			setNewSubscribleList() {
				const originData = getStorage('cargoTrack_history_subscrible')
				if (originData.length == 0) {
					setStorage('cargoTrack_history_subscrible', [this.selectShipRow])
				} else {
					const mergerData = [...originData, this.selectShipRow]
					const newData = this.unquie(mergerData)
					setStorage('cargoTrack_history_subscrible', newData)
				}
			},
			getNewSubscribleList() {
				const data = getStorage('cargoTrack_history_subscrible')
				this.historySubscribleList = data ? data : []
			},
			unquie(data) {
				const copyData = JSON.parse(JSON.stringify(data))
				for (let i = 0; i < copyData.length; i++) {
					for (let j = i + 1; j < copyData.length; j++) {
						if (copyData[i].billNo == copyData[j].billNo && copyData[i].Code == copyData[j].Code && copyData[i]
							.CnShippingName == copyData[j].CnShippingName) {
							copyData.splice(j, 1)
							j--
						}
					}
				}
				return copyData
			},
			openPopup() {
				this.subscriblePopupVisible = true
			},
			getSubscribleList() {
				request.get('/api/CargoTrack/GetCargoTrackLog?IsType=2&Page=1&Limit=5').then(res => {
					const rows = res.Rows.map((t) => {
						return {
							...t,
							formatTime: t.UpdateTime ? formatDateText(t.UpdateTime) : '',
							className: this.className(t.UpdateTime)
						}
					})
					this.subscribleList = rows
				})
			},
			className(date) {
				const minDiff = parseInt((new Date().getTime() - new Date(date).getTime()) / 60000)
				if (minDiff <= 30) {
					return "latest";
				} else if (minDiff > 30 && minDiff <= 60) {
					return "in_1_hour";
				} else if (minDiff > 60 && minDiff <= 180) {
					return "in_3_hour";
				} else if (
					minDiff > 180 &&
					new Date(date).setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)
				) {
					// 大于3个小时 但是在今天内
					return "in_today";
				} else {
					return "before_today";
				}
			},
			setParams(item){
				console.log(item);
				this.params.billNo=item.billNo || ''
				this.params.shipping=item.Code|| ''
			},
			goUserSubscrible(){
				customRouter.navigateTo({
					url:'/cargoTrackPackages/subscribleList/subscribleList'
				})
			}
		},
		created() {
			this.getNewSubscribleList()
			this.getSubscribleList()
		}
	}
</script>

<style lang="scss" scoped>
@import './cargoTrackHome.scss'
</style>